<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="${pageContext.request.contextPath}/themes/bootstrap/easyui.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/themes/icon.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
	$(function(){

		//默认对话框是关闭的
		$('#updatafm').dialog('close');
		$('#adddataFm').dialog('close');
		//配置修改表单
		$("#upfm").form({
			url:'${pageContext.request.contextPath}/updatafm',
			onSubmit: function(){
				var v3=$("#upfname").val().length;
				var v4=$("#upcontent").val().length;
				if(Number($("#upprice").val())<0||(v3>10||v4>100)){
					$.messager.alert('我的消息','数据格式不对，修改失败','info',function(){
					});
					return false;
				}
			},
				success:function(data){
				 if(data=="1"){
					$('#updatafm').dialog('close');
					$("#upfm").form('clear');
					$.messager.alert('我的消息','更新成功','info',function(){
						$('#stuMsg').datagrid('reload');
					});
				 }else{
					 $.messager.alert('我的消息','更新失败','info',function(){
							//$('#stuMsg').datagrid('reload');
						});
				 }
			}
		})
				
		//配置新增表单
		$("#addFm").form({
			url:'${pageContext.request.contextPath}/adddataFm',
			onSubmit: function(){
				var v1=$("#addfname").val().length;
				var v2=$("#addmenu").val().length;		
				if(Number($("#price").val())<0||(v1>10||v2>100)){
					
					$.messager.alert('我的消息','数据格式不对，新增失败','info',function(){
						//$('#stuMsg').datagrid('reload');
					});
					return false;
				}
			},
			success:function(data){
				if(data==1){
				
				$('#adddataFm').dialog('close');
				$("#addFm").form('clear');
				$('#stuMsg').datagrid('reload');
				$.messager.alert('我的消息','新增成功','info',function(){
					$('#stuMsg').datagrid('reload');
				});
				}else{
					$.messager.alert('我的消息','新增失败','info',function(){
						//$('#stuMsg').datagrid('reload');
					});
				}
			}
		})
		//删除
		function handleRemove(){
			var fms = $("#stuMsg").datagrid('getSelections');
			var fmid=[];
			for(var i=0;i<fms.length;i++){
				fmid[i]=fms[i].fmid;
			}
			if (fms.length==0) {
				$.messager.confirm('提示', '请选择一条数据');
				}
			else{
				$.ajax({  
	                type:'post',  
	                url:'${pageContext.request.contextPath}/deletefm',  
	                data: {"fmid":fmid},  
	                dataType: 'text',   
	                success: function(data){ 
	                    if(data=='1'){  
	                        //刷新数据  
	                        $("#stuMsg").datagrid('reload');  
	                    }else{  
	                        parent.$.messager.alert('温馨提示', data.message, 'info');  
	                    }  
	                }  
	             });  
				}
				}
			        
		//配置搜索框
		$('#searchStu').searchbox({
			searcher : function(value, name) {
				var uname = value;
				$('#stuMsg').datagrid('reload', {
					searchname : uname
				});
			}
		});
		//面板关闭后显示当前信息
		$("#pp").panel({
			onClose:function(){
				$("#old").prop("style","display:show");
			}
		})
		$("#all").click(function(){	
			$("#old").prop("style","display:none");
			$('#pp').panel('open',true);
		//搜索所有菜谱信息
		$('#stuMsg2').datagrid({
			url:'${pageContext.request.contextPath}/findAllFoodMenus',//配置请求
			//height:500,
			striped : true, //显示斑马线效果
			fitColumns:true,
			rownumbers : true,//显示行列号
			pagination : true,//显示分页工具
			//fit:true,
			//列json格式的数组对象
			columns : [ [ 
			              {field : 'fmid',title : '菜谱编号',hidden : true}, 
			              {field : 'elId',title : '员工号',hidden : true}, 
			              {field : 'fmName',title : '菜品名',width : fixWidth(0.2)}, 
			              {field : 'price',title : '菜价',width : fixWidth(0.2),align : 'right'},
			              {field : 'content',title : '做菜秘方',width : fixWidth(0.3),align : 'right'},
			              ] ],
		});
		$('#stuMsg2').datagrid('reload');
	})
		//配置数据表格
		$('#stuMsg').datagrid({
			url:'${pageContext.request.contextPath}/findFoodMenu',//配置请求
			//height:500,
			striped : true, //显示斑马线效果
			fitColumns:true,
			rownumbers : true,//显示行列号
			pagination : true,//显示分页工具
			//fit:true,
			//列json格式的数组对象
			columns : [ [ 
			              {field : 'checked',checkbox : true,width : fixWidth(0.2)}, 
			              {field : 'fmid',title : '菜谱编号',hidden : true}, 
			              {field : 'elId',title : '员工号',hidden : true}, 
			              {field : 'fmName',title : '菜品名',width : fixWidth(0.2)}, 
			              {field : 'price',title : '菜价',width : fixWidth(0.2),align : 'right'},
			              {field : 'content',title : '做菜秘方',width : fixWidth(0.3),align : 'right'},
			              ] ],
			//定义工具栏  通过数组定义工具栏
			//handler点击事件
			toolbar : [
			           {iconCls : 'icon-add1',text : '新增',handler : function() {$('#adddataFm').dialog('open');}}, 
			           '-', 
			           {iconCls : 'icon-cancel1',text : '删除',handler: handleRemove }, 
			           '-',
			           {iconCls : 'icon-edit1',text : '修改',handler : function() {
								var fms = $("#stuMsg").datagrid('getSelections');
								if (fms.length != 1) {
								$.messager.confirm('提示', '请选择一条数据', function(r) {
								if (r) {
										$("#stuMsg").datagrid('unselectAll');
										}
										})
										} else {
										$('#updatafm').dialog('open');
										var foodmenu = fms[0];
						 				$('#upfm').form('load',foodmenu);

											}
											}} 
			           ],			
		});
		$("#allfmm").click(function(){
			var fms = $("#stuMsg").datagrid('getSelections');
			//alert(fms[0].content)
			if(fms.length != 1){
				$.messager.confirm('提示', '请选择一条数据')
			}else{
				$("#dd").dialog('open');
				$("#fdm").text(fms[0].content);
				
			}
		})	
	})
	//配置更新表单提交事件
	function updataForm() {
		$("#upfm").form('submit');
	}
	//配置新增表单提交事件
	function adddataForm() {
		$("#addFm").form('submit');
	}
	//适配大小
	function fixWidth(percent)  
	{  
	    return document.body.clientWidth * percent ; //这里你可以自己做调整  
	}  

</script>
</head>
<body>
<button class="btn btn-info" id="all" type="button">全部菜单信息</button>

	<input id="searchStu"class="easyui-searchbox"
		data-options="prompt:'输入菜谱信息',width:350,height:30">
		<button style="float: right;" class="btn btn-info" id="allfmm" type="button">菜谱详细信息</button>
	<div id="old" style=""><table id="stuMsg" ></table></div>
	<div id="pp" class="easyui-panel" title="全部菜单信息"     
        style="width:100%;height:100%;padding:10px;background:#fafafa;"   
        data-options="iconCls:'icon-save',closable:true,closed:true,closeAnimation:'slide',    
               openAnimation:'slide', fit:true"> 
           <table id="stuMsg2"></table>         
	</div>  

	<!-- 修改的对话框 -->
	<div id="updatafm" class="easyui-dialog" title="更新菜谱信息"
		style="width: 400px; height: 450px;display:none;" data-options="modal:true">
		<form id="upfm" method="post">
			<div style="margin-bottom: 20px;display: none">
				<input class="easyui-textbox" name="fmid" style="width: 100%;">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品名</span>
				<input id="upfname" class="easyui-textbox" name="fmName" style="width: 100%"
					data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜价</span>
				<input class="easyui-numberbox"  id="upprice" name="price" style="width: 100%"
					data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>做菜配方</span>
				<input id="upcontent" class="easyui-textbox" name="content"
					style="width: 100%; height: 60px"
					data-options="">
			</div>
		</form>
		<div style="text-align: center; padding: 5px 0">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick="updataForm()" style="width: 80px">提交</a> 
		</div>
	</div>



	
		<!-- 增加的对话框 -->
	<div id="adddataFm" class="easyui-dialog" title="增加菜谱信息"
		style="width: 400px; height: 450px;display:none;" data-options="modal:true">
		<form id="addFm" method="post">
			<div style="margin-bottom: 20px;display:none;">
				<span>菜品id</span>
				<input class="easyui-textbox" name="fmId" style="width: 100%;">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜品名</span>
				<input id= "addfname"class="easyui-textbox" name="fmName" style="width: 100%"
					data-options="" maxlength="50">
			</div>
			<div style="margin-bottom: 20px">
				<span>菜价</span>
				<input class="easyui-numberbox" "id="price" name="price" style="width: 100%"
					data-options="">
			</div>
			<div style="margin-bottom: 20px">
				<span>做菜配方</span>
				<input id="addmenu" class="easyui-textbox" name="content"
					style="width: 100%; height: 20px"
					data-options="">
			</div>
		</form>
		<div style="text-align: center; padding: 5px 0">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick="adddataForm()" style="width: 80px">提交</a> 
		</div>
	</div>
	<div id="dd" class="easyui-dialog" title="菜谱详细" style="width:400px;height:200px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true">   
   		<p id="fdm"></p>  
</div>  
</body>
</html>